<template>
  <!-- <div class="return-list" ref="container">
    <div class="goodWrapper" v-for="order in orderList" :key="order.order_id">
      <div
        class="iconfont icon-tuikuanzhong powder"
        v-if="order._status._type === -1"
      ></div>
      <div
        class="iconfont icon-yituikuan"
        v-if="order._status._type === -2"
      ></div>
      <div class="orderNum">订单号：{{ order.order_id }}</div>
      <div
        class="item acea-row row-between-wrapper"
        v-for="cart in order.cartInfo"
        :key="cart.id"
        @click="$router.push({ path: '/order/detail/' + order.order_id })"
      >
        <div class="pictrue">
          <img
            :src="cart.productInfo.image"
            class="image"
            @click.stop="
              $router.push({ path: '/detail/' + cart.productInfo.id })
            "
          />
        </div>
        <div class="text">
          <div class="acea-row row-between-wrapper">
            <div class="name line1">{{ cart.productInfo.store_name }}</div>
            <div class="num">x {{ cart.cart_num }}</div>
          </div>
          <div class="attr line1" v-if="cart.productInfo.attrInfo">
            {{ cart.productInfo.attrInfo.suk }}
          </div>
          <div class="attr line1" v-else>{{ cart.productInfo.store_name }}</div>
          <div class="money">￥{{ cart.productInfo.price }}</div>
        </div>
      </div>
      <div class="totalSum">
        共{{ order.cartInfo.length || 0 }}件商品，总金额
        <span class="font-color-red price">￥{{ order.pay_price }}</span>
      </div>
    </div>
    <div class="noCart" v-if="orderList.length === 0 && page > 1">
      <div class="pictrue"><img src="@assets/images/noOrder.png" /></div>
    </div>
    <Loading :loaded="loaded" :loading="loading"></Loading>
  </div> -->

  <el-container>
      <el-header height="172px" style="padding:0 0;">
          <HomeNavigation></HomeNavigation>
          <SearchBox></SearchBox>
          <ClassNavigation></ClassNavigation>
      </el-header>
      <el-container class="return">
        <el-container style="width:1090px;margin:20px auto 0;">
            <el-aside width="180px">
                <div class="side">
                  <el-menu
                  default-active="1-4"
                  active-text-color="#b4a078"
                  @open="handleOpen"
                  @close="handleClose">
                    <el-menu-item-group>
                      <p slot="title" class="sideTitle">我的服务</p>
                      <el-menu-item index="1-1">
                         <router-link to="/user">
                          <p class="sideIetm">个人中心</p>
                        </router-link>
                        </el-menu-item>
                      <el-menu-item index="1-2">
                        <router-link to="/user/vip">
                          <p class="sideIetm">会员中心</p>
                        </router-link>
                      </el-menu-item>
                      <el-menu-item index="1-3">
                        <router-link to="/user/add_manage">
                          <p class="sideIetm">地址信息</p>
                        </router-link>
                      </el-menu-item>
                      <el-menu-item index="1-4">
                        <router-link to="/collection">
                        <p class="sideIetm">我的收藏</p>
                        </router-link>
                        </el-menu-item>
                      <el-menu-item index="1-5">
                          <router-link to="/user/user_coupon">
                            <p class="sideIetm">优惠券</p>
                          </router-link>
                      </el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group>
                      <p slot="title" class="sideTitle">订单管理</p>
                      <el-menu-item index="2-1">
                        <router-link to="/order/list/0">
                          <p class="sideIetm">我的订单</p>
                        </router-link>
                      </el-menu-item>
                      <el-menu-item index="2-2">
                        <router-link to="/order/refund_list"> 
                          <p class="sideIetm">售后/退款</p>
                        </router-link>
                      </el-menu-item>
                    </el-menu-item-group>
                </el-menu>
              </div>
            </el-aside>
          <el-main style="padding: 20px 0 20px 20px;">
            <div class="main">
              <div class="title">退款订单</div>
              <div class="table" v-for="order in orderList" :key="order.order_id"  @click="$router.push({ path: '/order/detail/' + order.order_id })">
                <div class="acea-row row-between">
                  <div class="tt">订单号：{{ order.order_id }}</div>
                  <div class="all">共{{ order.cartInfo.length || 0 }}件商品，总金额:<span style="font-weight: 700;">￥{{ order.pay_price }}</span></div>
                </div>
                <div class="border">
                <div class="t-title acea-row">
                  <div class="line1">商品信息</div>
                  <div class="line2">数量</div>
                  <div class="line2">单价</div>
                  <div class="line3">小计</div>
                </div>
                <div class="tr acea-row"  v-for="cart in order.cartInfo" :key="cart.id">
                  <div class="item-1 acea-row">
                    <div class="goods acea-row">
                      <div class="link">
                          <img
                          :src="cart.productInfo.image"
                          @click.stop="
                            $router.push({ path: '/detail/' + cart.productInfo.id })
                          "
                        />
                      </div>
                      <div class="f-fz">{{ cart.productInfo.store_name }}</div>
                    </div>
                    <div class="cell">x {{ cart.cart_num }}</div>
                    <div class="cell">￥{{ cart.productInfo.price }}</div>
                  </div>
                  <div class="item-2">￥{{ cart.cart_num * cart.productInfo.price}}</div>
                  <div class="item-3" @click="$router.push({ path: '/order/detail/' + order.order_id })">
                    <div class="icon"  v-if="order._status._type === -1" ><span  class="iconfont icon-tuikuanzhong i-size" style="color:red;"></span></div>
                    <div class="icon" v-if="order._status._type === -2"> <span  class="iconfont icon-yituikuan i-size"></span></div>
                  </div>
                </div>
              </div>
              </div>
            </div>
          </el-main>
        </el-container>
        <el-footer style="padding: 0;">
          <Foot></Foot>
        </el-footer>
      </el-container>
  </el-container>
</template>

<script>
import { getOrderList } from "@api/order";
import Loading from "@components/Loading";
import HomeNavigation from "@components/HomeNavigation";
import ClassNavigation from "@components/ClassNavigation";
import SearchBox from "@components/SearchBox";
import Foot from "@components/Foot";
export default {
  name: "ReturnList",
  components: {
    Loading,
    HomeNavigation,
    ClassNavigation,
    SearchBox,
    Foot
  },
  data() {
    return {
      orderList: [],
      page: 1,
      limit: 20,
      loading: false,
      loaded: false
    };
  },
  methods: {
    getOrderList() {
      const { page, limit } = this;
      if (this.loading || this.loaded) return;
      this.loading = true;
      getOrderList({
        page,
        limit,
        type: -3
      }).then(res => {
        this.orderList = this.orderList.concat(res.data);
        this.loading = false;
        this.loaded = res.data.length < limit;
        this.page++;
      });
    }
  },
  mounted() {
    this.getOrderList();
    this.$scroll(this.$refs.container, () => {
      !this.loading && this.getOrderList();
    });
  }
};
</script>

<style scoped>
.return {
    background-color: #fff;
  }
  .return .side {
    border: 1px solid #eaeaea;
    height:510px;
    padding-top: 24px;
    margin-top: 20px;
  }
  .return .side .sideTitle {
    font-size: 16px;
    color: #333;
    font-weight: 700;
    padding-left: 23px;
  }

  .return .side .sideIetm {
    font-size: 14px;
    padding-left: 23px;
  }
  .return  .main {
    width: 890px;
  }
  .return   .main .title {
    height: 42px;
    background-color: #f5f5f5;
    line-height: 41px;
    font-size: 14px;
    color: #333;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    padding-left: 21px;
    border: 1px solid #eaeaea;
    font-weight: 500;
  }
  .return   .main  .table {
    margin-top: 20px;
    width: 890px;
    margin-bottom: 30px;
  }
  .return   .main  .table .icon {
    width: 85px;
    height: 86px;
    margin-top: 7px;
    margin: 0 auto;
  }
  .return   .main  .table .icon  .i-size {
    font-size: 85px;
  }
  .return   .main    .all {
    height: 43px;
    max-width: 400px;
    line-height: 41px;
    font-size: 14px;
    color: #333;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    text-align: right;
    padding-right: 10px;
  }
  .return   .main  .table .border {
    border: 1px solid #eaeaea;
  }
  .return   .main  .table .tt , .t-title{
    height: 43px;
    padding-left: 21px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
    font-size: 14px;
    line-height: 42px;
  }
  .return   .main  .table .tt {
    max-width: 350px;
  }
  .return   .main  .table .t-title {
    padding: 0;
    width: 888px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #eaeaea;
    text-align: center;
  }
  .return   .main  .table .t-title .line1 {
    width: 358px;
  }
  .return   .main  .table .t-title .line2 {
    width: 129px;
  }
  .return   .main  .table .t-title .line3 {
    width: 140px;
  }
  .return   .main  .table  .tr {
    width: 888px;
    height: 141px;
    padding: 20px 0;
  }

  .return   .main  .table  .tr .item-1 {
    width: 618px;
  }
  .return   .main  .table  .tr .item-1  .goods {
    width: 338px;
    margin-left: 20px;
  }
  .return   .main  .table  .tr .item-1  .goods .link {
    width: 100px;
    height: 100px;
    margin-right: 10px;

  }
  .return   .main  .table  .tr .item-1  .goods .link img {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  .return   .main  .table  .tr .item-1 .goods .f-fz {
    width: 215px;
    max-height: 38px;
    overflow: hidden; /*自动隐藏文字*/
    text-overflow: ellipsis;/*文字隐藏后添加省略号*/
    margin:  auto 0;
    font-size: 14px;
    text-align: center;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
  }
  .return   .main  .table  .tr .item-1 .cell {
    width: 129px;
    height: 19px;
    text-align: center;
    line-height: 19px;
    margin: auto 0;
    font-size: 14px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
  }
  .return   .main  .table  .tr .item-2 {
    width: 140px;
    margin: auto 0;
    text-align: center;
    line-height: 19px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
    font-size: 14px;
  }
  .return   .main  .table  .tr .item-3 {
    width: 130px;
    margin: auto 0;
    text-align: center;
    cursor: pointer;
    color: #69c;
  }
</style>
